<template>
  <div class="wish-container">
    <!-- 页面标题区域 -->
    <div class="page-header">
      <h1 class="title">我的心愿单</h1>
      <div class="subtitle">收集感兴趣的活动，随时查看</div>
      <div class="header-decoration"></div>
    </div>
    
    <!-- 空状态处理 -->
    <el-empty 
      v-if="wishes == null || wishes.length === 0" 
      description="您的心愿单还是空的" 
      class="empty-state">
      <template #image>
        <div class="custom-empty-image">
          <i class="heart-icon"></i>
        </div>
      </template>
      <div class="empty-tips">添加您感兴趣的活动到心愿单，以便稍后查看</div>
      <el-button type="primary" @click="$router.push('/index')">
        浏览活动
      </el-button>
    </el-empty>

    <!-- 心愿列表内容 -->
    <transition-group 
      name="wish-list" 
      tag="div" 
      class="wish-grid"
      v-if="wishes && wishes.length > 0">
      <div class="wish-item" v-for="(wish, index) in wishes" :key="wish.id">
        <div class="wish-card" :class="{'pulse': wish.isNew}">
          <!-- 愿望内容 -->
          <div class="wish-content" @click="navigateToActivity(wish.id)">
            <Wish
              :wish="wish"
              class="custom-wish"
            />
          </div>
          
          <!-- 操作区域 -->
          <div class="action-bar">
            <div class="action-info" v-if="wish.addDate">
              <span class="add-date">添加于 {{ formatDate(wish.addDate) }}</span>
            </div>
            <div class="action-buttons">
              <el-tooltip content="查看详情" placement="top" :hide-after="1500">
                <el-button 
                  class="view-btn" 
                  type="primary"
                  size="small"
                  circle
                  @click="navigateToActivity(wish.id)">
                  <i class="view-icon"></i>
                </el-button>
              </el-tooltip>
              
              <el-popconfirm
                title="确定要将此活动从心愿单中移除吗？"
                confirm-button-text="确定"
                cancel-button-text="取消"
                @confirm="cancel(wish.id)"
              >
                <template #reference>
                  <el-button 
                    class="remove-btn" 
                    type="danger"
                    size="small"
                    circle>
                    <i class="remove-icon"></i>
                  </el-button>
                </template>
              </el-popconfirm>
            </div>
          </div>
        </div>
      </div>
    </transition-group>
  </div>
</template>

<script setup>
import Wish from "@/components/WishThing.vue";
import { getAllWishes, wishDeleteByUserId } from "@/apis/user/wish";
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from 'element-plus';

const router = useRouter();

// 数据
const wishes = ref([]);
const loading = ref(false);

// 日期格式化
const formatDate = (dateString) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'short',
    day: 'numeric'
  });
};

// 获取数据
const getPage = async () => {
  loading.value = true;
  try {
    const result = await getAllWishes();
    if (result != undefined) {
      wishes.value = result.data?.map(item => ({
        ...item,
        isNew: false // 标记是否为新添加项，用于动画效果
      }));
    }
  } catch (error) {
    console.error(error);
    ElMessage.error('获取心愿单失败，请稍后重试');
  } finally {
    loading.value = false;
  }
};

// 页面加载时执行
onMounted(async () => {
  await getPage();
});

// 取消心愿
const cancel = async (id) => {
  try {
    await wishDeleteByUserId(id);
    ElMessage.success('已从心愿单移除');
    getPage();
  } catch (error) {
    console.error(error);
    ElMessage.error('移除失败，请稍后重试');
  }
};

const navigateToActivity = (activityId) => {
  router.push(`/activityDetail/${activityId}`);
};
</script>

<style lang="less" scoped>
.wish-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
  
  .title {
    font-size: 32px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px;
  }
  
  .subtitle {
    color: #666;
    font-size: 16px;
    margin-bottom: 12px;
  }
  
  .header-decoration {
    height: 4px;
    width: 60px;
    background: linear-gradient(90deg, #FF9500, #FF2D55);
    margin: 0 auto;
    border-radius: 2px;
  }
}

.empty-state {
  padding: 60px 0;
  
  .custom-empty-image {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .heart-icon {
      display: inline-block;
      width: 64px;
      height: 64px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ddd'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
      background-position: center;
      background-repeat: no-repeat;
      opacity: 0.6;
    }
  }
  
  .empty-tips {
    color: #909399;
    font-size: 14px;
    margin: 16px 0;
  }
  
  .el-button {
    margin-top: 16px;
  }
}

.wish-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.wish-item {
  position: relative;
}

.wish-card {
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  }
  
  &.pulse {
    animation: pulse 2s ease-in-out;
  }
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 45, 85, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(255, 45, 85, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 45, 85, 0); }
}

.wish-content {
  flex: 1;
  cursor: pointer;
  padding: 16px;
}

.custom-wish {
  display: block;
  width: 100%;
}

.action-bar {
  padding: 12px 16px;
  border-top: 1px solid #f0f0f0;
  background-color: #f9f9f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  .action-info {
    .add-date {
      font-size: 12px;
      color: #909399;
    }
  }
  
  .action-buttons {
    display: flex;
    gap: 8px;
    
    .view-btn, .remove-btn {
      width: 32px;
      height: 32px;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .view-icon, .remove-icon {
      display: inline-block;
      width: 16px;
      height: 16px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
    }
    
    .view-icon {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E");
    }
    
    .remove-icon {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E");
    }
  }
}

// 列表动画
.wish-list-enter-active,
.wish-list-leave-active {
  transition: all 0.5s ease;
}

.wish-list-enter-from,
.wish-list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

// 响应式调整
@media (max-width: 768px) {
  .wish-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
  }
  
  .page-header .title {
    font-size: 26px;
  }
  
  .page-header .subtitle {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .wish-container {
    padding: 16px;
  }
  
  .wish-grid {
    grid-template-columns: 1fr;
  }
  
  .action-bar {
    flex-direction: column;
    gap: 8px;
    
    .action-info {
      width: 100%;
      text-align: center;
    }
    
    .action-buttons {
      width: 100%;
      justify-content: center;
    }
  }
}
</style>